<template>
    <div>
        <div class="search-bar">
            <van-row>
                <van-col span="3">
                    <img :src="locationIcon" width="70%" class="loaction-icon"/>
                </van-col>
                <van-col span="16">
                    <input type="text" class="search-input">
                </van-col>
                <van-col span="5" style="text-align:center;">
                    <van-button size='mini' class="search-btn">查找</van-button>  
                </van-col>
            </van-row>
        </div>
        <!-- swiper -->
        <div class="swiper-area">
            <van-swipe :autoplay="3000" class="swiper-item">
                <van-swipe-item v-for="(item, index) in bannerPicArray" :key="index">
                    <img v-lazy="item.image" width="100%">
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- type bar -->
        <div class="type-bar">
            <div v-for="(item, index) in categorty" :key="index">
                <img v-lazy='item.image' width="90%">
                <span>{{item.mallCategoryName}}</span>
            </div>
        </div>
        <!-- adbanner -->
        <div>
            <img v-lazy="adBanner" width="100%">
        </div>
        <!-- 推荐商品 -->
        <div class="recommend-area">
            <div class="recommend-title">
                商品推荐
            </div>
            <div class="recommend-body">
                <swiper :options="swiperOption">
                    <swiper-slide v-for='(item, index) in recommendGoods' :key="index">
                        <div class="recommend-item">
                            <img :src="item.image" width="80%">
                            <div>{{item.goodsName}}</div>
                            <div>￥{{item.price | moneyFilter}}(￥{{item.mallPrice | moneyFilter}})</div>
                        </div>
                    </swiper-slide>
                </swiper> 
            </div>
        </div>
        <!-- floor -->
        <floor-component :floorData="floor1" :floorTitle="floorName.floor1"></floor-component>
        <floor-component :floorData="floor2" :floorTitle="floorName.floor2"></floor-component>
        <floor-component :floorData="floor3" :floorTitle="floorName.floor3"></floor-component>
        <!-- hotgoods -->
        <div class="hot-area">
            <div class="hot-title">热卖商品</div>
            <div class="hot-goods">
            <van-list>
                <van-row gutter="20">
                    <van-col span="12" v-for="(item, index) in hotGoods" :key='index'>
                        <good-component :goodsName="item.name" :goodsPrice="item.mallPrice" :goodsImage="item.image" :goodsId="item.goodsId"></good-component>
                    </van-col>
                </van-row>
            </van-list>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import 'swiper/dist/css/swiper.css'
    import {swiper, swiperSlide} from 'vue-awesome-swiper'
    import floorComponent from '@/components/component/floorComponent.vue'
    import {toMoney} from '@/components/js/filter/moneyFilter.js'
    import goodComponent from '@/components/component/goodComponent.vue'
    import URL from '@/serverApi.config.js'
    export default {
        data () {
            return {
                locationIcon: require('../../assets/images/location.png'),
                bannerPicArray: [],
                categorty: [],
                adBanner: '',
                recommendGoods: [],
                swiperOption: {
                    slidesPerView: 3
                },
                floor1: [],
                floor2: [],
                floor3: [],
                floorName: [],
                hotGoods: []
            }
        },
        components:{
            swiper, 
            swiperSlide,
            floorComponent,
            goodComponent
        },
        filters: {
            moneyFilter(money){
                return toMoney(money)
            }
        },
        created () {
            axios({
                url: URL.getshopMallInfo,
                method: 'get' 
            }).then(res => {
                if(res.status === 200) {
                    this.categorty = res.data.data.category
                    this.adBanner = res.data.data.advertesPicture.PICTURE_ADDRESS
                    this.bannerPicArray = res.data.data.slides
                    this.recommendGoods = res.data.data.recommend
                    this.floor1 = res.data.data.floor1
                    this.floor2 = res.data.data.floor2
                    this.floor3 = res.data.data.floor3
                    this.floorName = res.data.data.floorName
                    this.hotGoods = res.data.data.hotGoods
                }
            }).catch(res => {
                console.log(res)
            })
        }
    }
</script>

<style scoped>
    .search-bar{height: 2.2rem;background-color: #e5017d;line-height: 2.2rem;overflow: hidden;}
    .search-input{width: 100%;height: 1.3rem;border:0px;border-bottom: 1px solid #e5e5e5;background-color: #e5017d;color:#fff;}
    .loaction-icon{padding:0.2rem 0 0 0.3rem;}
    .swiper-item{width: 100%;}
    .search-btn{border:0.1rem;}
    .swiper-area{clear: both;max-height: 9rem;overflow: hidden;}
    .type-bar{background-color: #fff;margin:0.3rem 0.3rem 0.3rem;border-radius: 0.3rem;font-size: 14px;display: flex;flex-direction: row;flex-wrap: nowrap;}
    .type-bar div{flex:1;padding: 0.3rem;box-sizing: border-box;font-size: 12px;text-align: center;}
    .recommend-area{background-color: #fff;margin-top:0.3rem;}
    .recommend-title{border-bottom: 1px solid #eee;font-size: 14px;padding:.2rem;color:#e5017d;}
    .recommend-body{border-bottom: 1px solid #eee;}
    .recommend-item{width: 99%;border-right:1px solid #eee;font-size: 12px;text-align: center;}
    .hot-area{text-align: center;font-size:14px;height: 1.8rem;line-height:1.8rem;}
</style>